<template>
  <div class="SystemTools">
    <el-tabs class="w-full" type="border-card">
      <el-tab-pane class="tool_tab_pane" label="字符加密" :style="{ height: `${Number(getHeight)}px` }">
        <el-row class="encryption_box" :gutter="20">
          <el-col :span="10">
            <div>
              <el-input v-model="str" placeholder="在此输入明文，然后加密即可。" :rows="15" type="textarea" />
            </div>
          </el-col>
          <el-col :span="4">
            <div class="btn">
              <el-button size="medium" type="primary" @click="encryptionClick">加密</el-button>
            </div>
          </el-col>
          <el-col :span="10">
            <div>
              <el-input v-model="encryptionStr" placeholder="加密后的密文会显示在这里。也可以是待解密的密文。" :rows="15" type="textarea" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="接口测试" :style="{ height: `${Number(getHeight)}px` }">
        <post-man-dialog />
      </el-tab-pane>
      <el-tab-pane label="自定义JAVA" :style="{ height: `${Number(getHeight)}px` }">
        <custom-java-code />
      </el-tab-pane>
      <el-tab-pane label="图片识别" :style="{ height: `${Number(getHeight)}px` }">
        <!-- <custom-java-code /> pictureIdentify -->
        <picture-identify></picture-identify>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import debounce from 'lodash/debounce'
  import { getList } from '@dams/api/home'
  import { GFCD } from '@/utils/utils'
  import PostManDialog from '@dams/views/apimManagement/processConfig/components/postManDialog.vue'
  import CustomJavaCode from './components/customJavaCode.vue'
  import PictureIdentify from './components/pictureIdentify.vue'
  export default {
    name: 'SystemTools',
    components: { PostManDialog, CustomJavaCode, PictureIdentify },
    data() {
      return {
        clientHeight: 0,
        str: '',
        encryptionStr: '',
      }
    },
    computed: {
      getHeight() {
        return `${this.clientHeight - 160}`
      },
    },
    created() {
      this.windowResize()
    },
    methods: {
      windowResize: debounce(function () {
        this.clientHeight = document.documentElement.clientHeight
      }, 100),
      async encryptionClick() {
        let damsurl = GFCD('dams')
        let url = `${damsurl.domain}${damsurl.baseUrl}`
        let res = await getList(url, {
          data: JSON.stringify({
            ENCRYPTION_STR: this.str,
          }),
          method: 'system.common.string.encryption.service',
        })
        if (res.code === '00000') {
          this.encryptionStr = res.data.ENCRYPTION_STR_RESULT
          this.$message({
            type: 'success',
            message: res.msg,
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .SystemTools {
    padding: 30px 10px;
  }
  .tool_tab_pane {
    display: flex;
    align-items: center;
  }
  .encryption_box {
    width: 100%;
    padding-top: 10px;
    .btn {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-button {
      padding: 10px 20px;
    }
  }
</style>
